<template>
	<view>
	<view class="week-box">
		
		<view class="week-ym">
			<text class="ym-text">{{y}}</text>
		</view>

		<view class="category-list">
			<view class="category" v-for="(row, index) in check" :key="index">

				<view class="week">
					{{row.week}}
				</view>
				<view class="text" :class="index == active ? 'active' : ''" @tap="change(index)">{{ row.d }}</view>
			</view>
		</view>
		
	</view>
	<view class="container w-100 h-100" v-if="!loading">
		<view class="d-flex flex-column w-100" style="padding: 30rpx; padding-bottom: -34rpx; margin-bottom: 150rpx;">
			<view class="d-flex align-items-center bg-white" 
				style="padding: 30rpx; height: 180rpx; margin-bottom: 34rpx; border-radius: 8rpx;" 
				v-for="(item, index) in packages" :key="index"  @tap="pay(item.id)">
				<image src="../../static/images/register/doctor.png" style="width: 120rpx; height: 140rpx; margin-right: 20rpx; border: 1rpx solid #E2E2E2; border-radius: 15rpx;"></image>
				<view class="d-flex flex-fill flex-column " style="height: 180rpx; margin: auto 10rpx; ">
					<view style="line-height:70rpx; color: #000000; font-size: 35rpx;" >{{ item.name }}</view>
					<view class="font-size-sm text-color-base" >{{ item.position}}</view>
				</view>
				<view class="d-flex justify-content-between align-items-center">
					<view class="yuhao">{{item.yuhao}}</view>
					<view class="guahao" >￥{{ item.registrationFee}}</view>	
					<!-- <button type="primary" size="mini" plain class="pay-btn">挂号</button> -->
				</view>
			</view>
		</view>
		<view class="d-flex position-fixed bg-base fixed-bottom text-color-primary font-size-base align-items-center just-content-center w-100"
			style="height: 150rpx;">
			<text>挂号记录</text>
		</view>
	</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {	
				y: '',
				check: [],
				active: 0,
				yuanquid:0,
				packages: [],
				ishao:"有号",
				keshiname:'',
				datas:{info: JSON.stringify({
				
						"keshiname": this.keshiname,
						"yuanquid":this.yuanquid,
						"date":this.y
						
					})}
			}
		},
		
		onLoad(option) {
			this.keshiname=option.name;
			this.yuanquid=option.id;
			console.log(this.yuanquid);
			this.getTimeandWeek()
			this.y = this.check[0].date;
			uni.setNavigationBarTitle({
				title:option.name
			})
			this.getDocator()
		},
		methods: {
			
			getTimeandWeek() {
				//获取当前时间
				var now = new Date();
				//往后几天就循环几次
				for (let i = 1; i < 8; i++) {
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;

					var day = date.getDate();
					var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var weekDay = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
					//把七天的时间和星期添加到数组中
					this.check.push({
						date: year + '-' + month + '-' + day,
						d: day,
						week: weekDay[dt2.getDay()],
						checked: false
					});
				}
			},

			change(d) {
				console.log(this.check[d].date)
				this.y = this.check[d].date;
				this.active = d;
				
				this.getDocator();

			},
			
			
			// 根据科室名称获取科室值班的医生
			getDocator(){
				this.datas = {
					info: JSON.stringify({
									
						"keshiname": this.keshiname,
						"yuanquid":this.yuanquid,
						"date":this.y
						
					})
				};
				
				this.$api.getDoctor(this.datas).then(res => {
					console.log("查到的数据"+JSON.stringify(res))
					this.packages=res
					console.log(this.packages)
					
					for (var i = 0; i < this.packages.length; i++) {  
					    console.log(i,this.packages[i].yuhao);  
						if(this.packages[i].yuhao>0){
							this.packages[i].yuhao="有号"
						}else{
							this.packages[i].yuhao="没号"
						}
					} 
					
				
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
				
				})
			},
			pay(id){
				uni.navigateTo({
					url:"/pages/appointment/index?id="+id+"&keshiname="+this.keshiname
				})
				console.log(id)
			}
			
		}
	}
</script>

<style>
	/* 周日期样式*/
	.week-box {
		margin: 0 32rpx;
		background: #FFFFFF;
		color: #888;
		font-size: 24rpx;
		box-shadow: 0 0 10rpx #e6e6e6;
		border-radius: 20rpx;


	}

	.week-ym {
		font-size: 30rpx;
		line-height: 72rpx;
		/* border-bottom: 2rpx solid #dadada; */
		text-align: center;
	}

	.week {

		/* line-height: 54rpx; */
		margin: auto 23rpx;
		color: #999999;


	}
	.guahao{
		/* margin-right:5rpx ; */
		background-color: #FFA500;
		width: 110rpx;
		height: 40rpx;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.yuhao{
		font-size: 28rpx;
	}
	.active {
		border: 4rpx solid #00ce88;
		border-radius: 50%;
		color: #00ce88;
		font-size: 30upx;
	}

	.text {
		margin: 20upx auto 0upx auto;
		width: 40rpx;
		height: 40rpx;
		font-size: 30upx;
		color: #3c3c3c;
		
	}

	.category-list {
		width: 100%;
		margin: 0 4%;
		padding: 0 0 30upx 0;

		display: flex;
		text-align: center;
	}
	
	
	
</style>
